<template>
  <div class="analysis-container">
    <top-menu :data="data" style="height:30px !important"/>
    <!-- Header -->
    <div class="header">
      <!-- <div class="logo"></div> --> <!-- Logo placeholder if needed -->
      <div class="titleMain">
          <h1>全流程成材率分析</h1>
      </div>
      <div class="date-selector">
        <el-radio-group v-model="dateRange" size="small">
          <el-radio-button label="日"></el-radio-button>
          <el-radio-button label="周"></el-radio-button>
          <el-radio-button label="月"></el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- Tabs -->
    <div class="tabs">
      <button
        :class="['tab-button', { active: activeTab === '酸轧' }]"
        @click="activeTab = '酸轧'"
      >
        酸轧
      </button>
      <button
        :class="['tab-button', { active: activeTab === '连退' }]"
        @click="activeTab = '连退'"
      >
        连退
      </button>
      <button
        :class="['tab-button', { active: activeTab === '镀锌' }]"
        @click="activeTab = '镀锌'"
      >
        镀锌
      </button>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Row 1: 3 Cards -->
      <div class="flex-row">
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>切头</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData1" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="currentLoss" label="本月损失量">
               <template #default="{ row }">
                  <span :style="{ color: row.currentLoss > 1020 ? 'red' : (row.currentLoss < 1020 ? 'lightgreen' : 'white') }">
                      {{ row.currentLoss }} {{ row.currentLoss > 1020 ? '⬆' : (row.currentLoss < 1020 ? '⬇' : '') }}
                  </span>
               </template>
            </el-table-column>
            <el-table-column prop="lastLoss" label="上月损失量" />
          </el-table>
        </div>
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>切尾</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData1" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
             <el-table-column prop="currentLoss" label="本月损失量">
               <template #default="{ row }">
                  <span :style="{ color: row.currentLoss > 1020 ? 'red' : (row.currentLoss < 1020 ? 'lightgreen' : 'white') }">
                      {{ row.currentLoss }} {{ row.currentLoss > 1020 ? '⬆' : (row.currentLoss < 1020 ? '⬇' : '') }}
                  </span>
               </template>
            </el-table-column>
            <el-table-column prop="lastLoss" label="上月损失量" />
          </el-table>
        </div>
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>切边</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData1" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
             <el-table-column prop="currentLoss" label="本月损失量">
               <template #default="{ row }">
                  <span :style="{ color: row.currentLoss > 1020 ? 'red' : (row.currentLoss < 1020 ? 'lightgreen' : 'white') }">
                      {{ row.currentLoss }} {{ row.currentLoss > 1020 ? '⬆' : (row.currentLoss < 1020 ? '⬇' : '') }}
                  </span>
               </template>
            </el-table-column>
            <el-table-column prop="lastLoss" label="上月损失量" />
          </el-table>
        </div>
      </div>

      <!-- Row 2: 4 Cards -->
      <div class="flex-row">
        <div class="table-card" v-if="activeTab === '酸轧'">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>酸洗损失量</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="损失量" />
          </el-table>
        </div>
        <div class="table-card" v-if="activeTab !== '酸轧'">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>连退/镀锌取样损失</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="损失量" />
          </el-table>
        </div>
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>事故</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="损失量" />
          </el-table>
        </div>
         <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>质量缺陷损失</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="损失量" />
          </el-table>
        </div>
      </div>

      <!-- Row 3: 2 Cards (Conditional) -->
      <div class="flex-row" v-if="activeTab === '酸轧'">
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>热轧可优化缩尺列表</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="缩尺量统计" />
          </el-table>
        </div>
        <div class="table-card">
          <div class="card-header">
            <div class="title-icon-left"></div>
            <span>热轧可优化宽度控制余量</span>
            <div class="title-icon-right"></div>
          </div>
          <el-table :data="tableData2" style="width: 100%;" height="100%" border size="small" :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
            <el-table-column prop="grade" label="品规" />
            <el-table-column prop="loss" label="目前控制余量" />
          </el-table>
        </div>
      </div>

      <!-- Remove Grid Placeholders -->
      <!-- <div v-if="activeTab !== '酸轧'" class="grid-placeholder"></div> -->
      <!-- <div v-if="activeTab !== '酸轧'" class="grid-placeholder"></div> -->

    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import TopMenu from '/@/components/TopMenu/TopMenu.vue';

const activeTab = ref('酸轧'); // Default tab
const dateRange = ref('日'); // Default date range
const data=ref([{name:'各产线全流程成材率计算及人工录入',url:'/yiledAndSubsection/CalculationOfYieldRate'},{name:'缺陷-成材率分析',url:'/yiledAndSubsection/DefectYieldAnalysis'},{name:'成材率分档数据统计',url:'/yiledAndSubsection/CurrenSituationLossesOptimization'},{name:'热轧宽度余量统计分析',url:'/yiledAndSubsection/HotRollingWidthAllowance'},{name:'热轧缩径量规格统计',url:'/yiledAndSubsection/HotRollingReductionAmount'}]);


// --- Table Styles (Adopted from XGRPH.vue / CGL870SZGJ.vue) ---
const tableHeaderStyle = {
  background: '#183272', // Darker blue for header
  color: '#b8e8ff',
  padding: '6px 0',
  textAlign: 'center',
  fontWeight: 'normal',
  borderBottom: '1px solid #06279d' // Use the border color from image
};

const tableCellStyle = {
  padding: '6px 0',
  textAlign: 'center',
  color: '#c0c4cc',
  borderBottom: '1px solid #06279d',
  borderRight: '1px solid #06279d',
  fontSize: '12px'
};

// --- Sample Data --- (Replace with actual data fetching)
const createSampleData = (cols: number) => {
  const data = [];
  for (let i = 0; i < 7; i++) {
    const loss = 1020 + Math.floor(Math.random() * 10 - 5) * (Math.random() > 0.3 ? 1 : 200); // Add more variance
    if (cols === 3) {
        data.push({ grade: 'DC51D-1', currentLoss: loss , lastLoss: 2010 + i });
    } else {
        data.push({ grade: 'DC51D-1', loss: 2010 + i });
    }
  }
  return data;
};

const tableData1 = ref(createSampleData(3)); // For 3-column tables
const tableData2 = ref(createSampleData(2)); // For 2-column tables

</script>

<style scoped lang="less">
.analysis-container {
  width: 100vw;
  height: 100vh;
  background: url(/src/assets/images/body-bg.jpg) no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

/* Header Styles */
.header {
  flex: 0 0 70px; /* Adjusted height */
  background-image: url(/src/assets/images/head-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start; /* Change to flex-start */
  justify-content: center;
  position: relative;
  padding: 0 20px; /* Keep horizontal padding */
  padding-top: 5px; /* Add top padding */
}

.titleMain {
  flex-grow: 1; /* Allow title to take space */
  text-align: center;
  h1 {
    font-size: 24px; /* Adjust size */
    color: #ffffff;
    text-shadow: 0 0 10px #42b4ff, 0 0 20px #0a2466;
    letter-spacing: 3px;
    margin: 0; /* Remove default margin */
    /* Remove line-height: 70px; */
    line-height: normal; /* Explicitly set to normal */
  }
}

.date-selector {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Date Selector Radio Button Styles */
:deep(.date-selector .el-radio-button__inner) {
  background-color: rgba(0, 57, 139, 0.6);
  border: 1px solid #005bac;
  color: #a0cfff;
  padding: 4px 10px;
  font-size: 12px;
  height: 26px;
  line-height: 16px;
  box-shadow: inset 0 0 5px rgba(0, 129, 255, 0.3);
}
:deep(.date-selector .el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: rgba(0, 129, 255, 0.7);
  border-color: #007bff;
  color: #fff;
  box-shadow: 0 0 8px rgba(0, 129, 255, 0.5);
}
:deep(.date-selector .el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 4px 0 0 4px;
  border-right: none;
}
:deep(.date-selector .el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 4px 4px 0;
}

/* Tabs Styles */
.tabs {
  display: flex;
  justify-content: center;
  /* Remove vertical padding */
  /* padding: 5px 0; */ 
  flex-shrink: 0;
  background-color: rgba(6, 21, 51, 0.5); /* Darker semi-transparent background */
  border-bottom: 1px solid rgba(0, 129, 255, 0.3);
}

.tab-button {
  background: linear-gradient(to bottom, rgba(14, 48, 108, 0.8), rgba(8, 30, 70, 0.9));
  border: 1px solid #1a4f9a;
  color: #a8cfff;
  padding: 6px 25px;
  margin: 0 5px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 8px rgba(0, 129, 255, 0.2);

  &:hover {
    background: linear-gradient(to bottom, rgba(20, 60, 120, 0.9), rgba(12, 40, 85, 1));
    border-color: #3a7bd5;
    color: #fff;
  }

  &.active {
    background: linear-gradient(to bottom, rgba(0, 129, 255, 0.8), rgba(0, 86, 170, 0.9));
    border-color: #007bff;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 129, 255, 0.5);
  }
}

/* Main Content Flexbox Layout */
.main-content {
  flex-grow: 1;
  padding: 10px;
  display: flex; /* Use Flexbox */
  flex-direction: column; /* Stack rows vertically */
  gap: 10px;
  overflow: auto; /* Add scroll if content overflows */
}

.flex-row {
  display: flex; /* Arrange cards horizontally */
  gap: 10px;
  flex-grow: 1; /* Allow rows to take vertical space */
  min-height: 0; /* Prevent flex items from overflowing */
}

/* Table Card Style (Adopted from CGL870SZGJ) */
.table-card {
  flex: 1; /* Cards share width equally within a row */
  display: flex;
  flex-direction: column;
  background-color: rgba(28, 58, 99, 0.7);
  border: 1px solid rgba(90, 130, 190, 0.4);
  box-shadow: 0 0 15px rgba(11, 93, 209, 0.2);
  overflow: hidden;
  min-width: 0; /* Prevent flex items from overflowing */
}

/* Card Header Style (Adopted from CGL870SZGJ) */
.card-header {
  background-image: url(/src/assets/images/sub_title_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 6px 15px;
  font-weight: bold;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(58, 90, 138, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5vh;
  line-height: 3.5vh;
  position: relative; /* Needed for potential absolute elements like buttons */
}

/* Style for the title text span */
.card-header span {
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bolder;
  font-size: 1.7vh;
}

/* Copied Icon Styles */
.title-icon-left {
  margin-right: 1vw;
  transform: rotateY(180deg);
  width: 2vw;
  height: 3vh;
  background-image: url(/src/assets/images/title-icon-right.png);
  background-size: 100% 100%;
}

.title-icon-right {
  margin-left: 1vw;
  width: 2vw;
  height: 3vh;
  background-image: url(/src/assets/images/title-icon-right.png);
  background-size: 100% 100%;
}

/* Deep Table Styles (Unified) */
:deep(.el-table) {
  background-color: transparent !important;
  border: none !important;
}

:deep(.el-table tr:nth-child(odd)) {
  background-color: #0f2142 !important;
}

:deep(.el-table tr:nth-child(even)) {
  background-color: #142a52 !important;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: rgba(66, 180, 255, 0.1) !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell) {
  background-color: transparent !important;
  border-color: #06279d !important;
  color: #c0c4cc;
}

:deep(.el-table th.el-table__cell) {
  color: #b8e8ff;
  background-color: #183272 !important;
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border .el-table__inner-wrapper::after),
:deep(.el-table--border::after),
:deep(.el-table--border::before),
:deep(.el-table__border-left-patch),
:deep(.el-table--border .el-table__inner-wrapper::before) {
  background-color: #06279d !important;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #06279d !important;
}

:deep(.el-table--border td.el-table__cell),
:deep(.el-table--border th.el-table__cell) {
  border-right: 1px solid #06279d !important;
}

:deep(.el-table__body-wrapper) {
  scrollbar-width: thin;
  scrollbar-color: #3a5a8a #142a52;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #142a52;
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background-color: #3a5a8a;
  border-radius: 3px;
}

/* Remove Grid placeholder style */
/*
.grid-placeholder {
  visibility: hidden; 
}
*/

</style>
